import React,{Component} from 'react';
import {Upload,Icon,Modal,Row} from 'antd';
import PropTypes from 'prop-types';

const defaultProps = {
  type:'handImg'
}

const addImgButton = {
  position:'absolute'
}

const uploadingBox = {
  width:200,
  height:200
}
export default class UpLoadGroup extends Component{
  constructor(props){
    super(props);
    this.state = {
      previewVisible: false,
      previewImage: '',
      fileList: [],
    }
  }
  getBase64(img, callback) {
      const reader = new FileReader();
      reader.addEventListener('load', () => callback(reader.result));
      reader.readAsDataURL(img);
  }
  handleCancel = () => this.setState({ previewVisible: false })

  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  }
  beforeUpload(file){
   console.log(file)
   // this.setState({fileList:this.state.fileList});
  }
handleChange(obj){
  console.log(obj)
  switch(obj.file.status){
    case 'uploading':
      this.setState({fileList:obj.fileList});
    break;
    case 'error':
       this.setState({fileList:[obj.file]});
    break;
    case 'removed':
      this.setState({fileList:obj.fileList});
    break;
  }   
}

  render() {
   //console.log(this.state.fileList);
    const { previewVisible, previewImage, fileList } = this.state;
    const uploadButton = (
      <Row type="flex" justify="space-around" align="middle" style={{height:'100%'}}>
      <div style={{color:'#bbbbbb',marginTop:-8}}>
        <Icon type="cloud-upload-o" style={{fontSize:54}} spin={false}/>
        <h3 className="ant-upload-text" style={{fontSize:15}}>点击上传</h3>
      </div>
      </Row>
    );
    return (
      <div className="clearfix">
        <Upload
          className="avatar-uploader"
          action="http://jsonplaceholder.typicode.com/posts/"
          listType="picture-card"
          fileList={fileList}
          beforeUpload = {this.beforeUpload.bind(this)}
          onPreview={this.handlePreview}
          onChange={this.handleChange.bind(this)}
        >
          {fileList.length >= 1 ? null : uploadButton}
        </Upload>
        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </div>
    );
  }
}

UpLoadGroup.defaultProps = defaultProps;